import { safeIndexApi } from '@/api';
import YmCollaPanes from '@/components/YmCollaPanes';
import type { TabsProps } from 'antd';
import { Descriptions, Spin, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import DriveTable from './driveTable';
import OwnTable from './ownTable';
type infoProps = {
  entId?: string;
  driverId: string;
};
type FactorListType = {
  factorName: string;
  maxScore: number;
  value: string | number;
  score: number;
};
export type DataType = {
  totalScore: number;
  factorList: FactorListType[];
};
export type DetailType = {
  safetyIndex: number;
  selfScore: number;
  behaviorTotalScore: number;
  self: DataType;
  badDrivingHabits: DataType;
  activeSafety: DataType;
  speedDependent: DataType;
};
const DriverIndexInfo: React.FC<infoProps> = (props) => {
  const { driverId, entId } = props;
  const [loading, setloading] = useState(true);
  const [detail, setDetail] = useState<DetailType>({
    safetyIndex: 0,
    selfScore: 0,
    behaviorTotalScore: 0,
    self: { totalScore: 0, factorList: [] },
    badDrivingHabits: { totalScore: 0, factorList: [] },
    activeSafety: { totalScore: 0, factorList: [] },
    speedDependent: { totalScore: 0, factorList: [] },
  });
  const getDetail = () => {
    setloading(true);
    if (entId) {
      safeIndexApi.entDriverSafeIndexDetail({ driverId: driverId, entId: entId }).then((res: any) => {
        setloading(false);
        if (res.code == 200) {
          setDetail(res.data);
        }
      });
    } else {
      safeIndexApi.driverSafeIndexDetail({ driverId: driverId }).then((res: any) => {
        setloading(false);
        if (res.code == 200) {
          setDetail(res.data);
        }
      });
    }
  };

  useEffect(() => {
    if (driverId) {
      getDetail();
    }
  }, [driverId]);
  const onChange = (key: string) => {
    console.log(key);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '司机自身得分',
      children: <OwnTable {...detail}></OwnTable>,
    },
    {
      key: '2',
      label: '驾驶行为得分',
      children: <DriveTable {...detail}></DriveTable>,
    },
  ];

  return (
    <div style={{ position: 'relative', height: '100%' }}>
      <Spin
        spinning={loading}
        style={{ position: 'absolute', top: '50%', left: 0, right: 0, bottom: 0, zIndex: 9 }}
      ></Spin>
      <YmCollaPanes hiddenHeader={true} collapsible={false} headerTitle="" paneKey={1} collPanesActiveKeys={[1]}>
        <Descriptions
          title={false}
          layout="vertical"
          bordered
          style={{ padding: '16px 0', textAlign: 'center' }}
          className="ym-descr-center"
        >
          <Descriptions.Item label="司机安全指数">{detail.safetyIndex}</Descriptions.Item>
          <Descriptions.Item label="司机自身得分">{detail.selfScore}</Descriptions.Item>
          <Descriptions.Item label="驾驶行为得分">{detail.behaviorTotalScore}</Descriptions.Item>
        </Descriptions>
      </YmCollaPanes>
      <YmCollaPanes hiddenHeader={true} collapsible={false} headerTitle="" paneKey={1} collPanesActiveKeys={[1]}>
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      </YmCollaPanes>
    </div>
  );
};
export default DriverIndexInfo;
